<template>
  <div class="cardContainer">
    <!-- 卡片信息 -->
    <div class="contextContainer">
      <div class="cardContext">
        <div class="contextHeader">
          <span class="left"><i class="ri-live-line"></i>视频</span>
          <span class="right"
            >查看更多<i class="ri-arrow-right-s-line"></i
          ></span>
        </div>
        <div class="slier">
          <!-- 图片滑块 -->
          <div class="context">
            <!-- 顶部图片和介绍 -->
            <div class="contextTop">
              <img src="@/assets/images/用户头像.jpg" alt="" />
              <div>打造理想家|发视频,分流量</div>
            </div>
            <!-- 底部评论 -->
            <div class="contextBottom">
              <span class="count">1.2万视频·2935万播放</span>
              <span class="remark">拍视频</span>
            </div>
          </div>
          <!-- 图片滑块 -->
          <div class="context">
            <!-- 顶部图片和介绍 -->
            <div class="contextTop">
              <img src="@/assets/8.jpeg" alt="" />
              <div>前端技术|vue框架</div>
            </div>
            <!-- 底部评论 -->
            <div class="contextBottom">
              <span class="count">1.3万视频·45万播放</span>
              <span class="remark">写心情</span>
            </div>
          </div>
          <!-- 图片滑块 -->
          <div class="context">
            <!-- 顶部图片和介绍 -->
            <div class="contextTop">
                 <img src="@/assets/小陆离.jpg" alt="" />
              <div>你能一直保持开心吗?|心情</div>
            </div>
            <!-- 底部评论 -->
            <div class="contextBottom">
              <span class="count">6.4万视频·5万播放</span>
              <span class="remark">写评论</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Video",
};
</script>

<style lang='less' scoped>
// 卡片整体容器
.cardContainer {
  width: 340px;
  height: 200px;
  margin: 20px 0 0 20px;
  // 卡片内容容器
  .contextContainer {
    width: 350px;
    height: 170px;
    // background: chartreuse;
    // 卡片内容
    .cardContext {
      width: 350px;
      height: 32px;
      // 内容顶部
      .contextHeader {
        display: flex;
        justify-content: space-between;
        line-height: 32px;
        font-size: 14px;
        margin-top: 10px;
        .left {
          i {
            padding: 2px;
            margin-right: 2px;
            vertical-align: middle;
            background: #ffb321;
            border-radius: 3px;
            color: #fff;
          }
        }
        .right {
          color: #bbbbbb;
          .ri-arrow-right-s-line {
            padding: 4px;
            vertical-align: middle;
            color: #bbbbbb;
          }
        }
      }
    //   滑块
    .slier{
        width: 330px;
        height: 108px;
        display: flex;
        
        // flex:0 0 
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x:scroll ;
        // overflow-y:hidden
        // 内容中心滑块区域
      .context {
        width: 330px;
        height: 108px;
        border: 1px solid #ddd;
        border-radius: 10px;
        margin-right:20px ;
        // overflow-y:hidden
        //   background: yellowgreen;
        //   顶部
        .contextTop {
          margin: 10px auto;
          height: 60px;
          width: 300px;
          //   background: violet;
          display: flex;
          img {
            width: 40px;
            height: 40px;
            margin: auto 10px;
            margin-top: 10px;
            border-radius: 10px;
          }
          div {
            width: 200px;
            height: 40px;
            // background: greenyellow;
            line-height: 40px;
            margin-top: 10px;
            font-weight: bold;
          }
        }
        //   底部
        .contextBottom {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .count {
            font-size: 12px;
            color: #c6c6c6;
          }
          .remark {
            width: 60px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #476dcb;
            background: #e5eeff;
            border-radius: 2px;
            text-align: center;
          }
        }
      }
    }
      
    }
  }
}
</style>

